<a href="http://github.com/angular/angular.js/edit/master/docs/content/guide/dev_guide.templates.filters.using_filters.ngdoc" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable=""></code>
<div><span class="hint"></span>
</div>
</h1>
<div><div class="developer-guide-page developer-guide-templates-filters-using-angular-filters-page"><p>Filters can be part of any <a href="api/ng.$rootScope.Scope"><code>api/ng.$rootScope.Scope</code></a> evaluation but are typically used to format
expressions in bindings in your templates:</p>
<pre><code>    {{ expression | filter }}</code></pre>
<p>Filters typically transform the data to a new data type, formatting the data in the process.
Filters can also be chained, and can take optional arguments.</p>
<p>You can chain filters using this syntax:</p>
<pre><code>    {{ expression | filter1 | filter2 }}</code></pre>
<p>You can also pass colon-delimited arguments to filters, for example, to display the number 123 with
2 decimal points:</p>
<pre><code>    123 | number:2</code></pre>
<p>Use the same syntax for multiple arguments:</p>
<pre><code>    myArray | orderBy:&#39;timestamp&#39;:true</code></pre>
<p>Here are some examples that show values before and after applying different filters to an
expression in a binding:</p>
<ul>
<li>No filter: <code>{{1234.5678}}</code> =&gt; <code>1234.5678</code></li>
<li>Number filter: <code>{{1234.5678|number}}</code> =&gt; <code>1,234.57</code>. Notice the &quot;,&quot; and rounding to two
significant digits.</li>
<li>Filter with arguments: <code>{{1234.5678|number:5}}</code> =&gt; <code>1,234.56780</code>. Filters can take optional
arguments, separated by colons in a binding. For example, the &quot;number&quot; filter takes a number
argument that specifies how many digits to display to the right of the decimal point.</li>
</ul>
<h3>Related Topics</h2>
<ul>
<li><a href="guide/dev_guide.templates.filters">Understanding Angular Filters</a></li>
<li><a href="guide/dev_guide.templates.filters.creating_filters">Creating Angular Filters</a></li>
</ul>
<h2>Related API</h3>
<ul>
<li><a href="api/ng.$filter"><code>Angular Filter API</code></a></li>
</ul>
</div></div>
